<template>
	<view>
		<view class="nurse-person">
			全部人数 <text>569</text>
		</view>
		<view class="tab-head">
			<u-tabs-swiper ref="uTabs" :list="tab" :current="current" @change="tabsChange" :is-scroll="false"
				inactive-color="#72717c" active-color="#373b4f" :height="80" :bar-width="56" :bar-height="5"
				:bar-style="barStyle" :active-item-style="itemStyle"></u-tabs-swiper>
		</view>
		<view class="tab-content">
			<view class="search-bar">
				<u-search placeholder="名字/手机号" shape="square" bg-color="#f7f7ff" v-model="search" action-text="取消"
					:clearabled="false" @custom="cancle"></u-search>
			</view>
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y="true" style="height: calc(100vh - 140px); width: 100%;" @scrolltolower="onreachBottom">
						<view class="type-cells">
							<view class="type-cell" v-for="(item,index) in list" :key="index">
								<view class="type-cell__hd">
									<view class="type-cell__title">{{item.title}}</view>
									<button type="default" class="remove-btn" @click="remove(item.id)">移除科室</button>
								</view>
								<view class="type-cell__bd">
									<view class="type-cell__group">
										<view class="type-cell__item clearfix">
											<view class="type-cell__info" v-for="(items,index) in item.info">
												<image :src="items.icon" mode="" class="type-info__icon"></image>
												<text class="type-info__label">{{items.label}}</text>
												<text class="type-info__val">{{items.val}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y="true" style="height: calc(100vh - 140px);width: 100%;" @scrolltolower="onreachBottom">
						<view class="type-cells">
							<view class="type-cell" v-for="(item,index) in list" :key="index">
								<view class="type-cell__hd">
									<view class="type-cell__title">{{item.title}}</view>
									<button type="default" class="remove-btn" @click="remove(item.id)">移除科室</button>
								</view>
								<view class="type-cell__bd">
									<view class="type-cell__group">
										<view class="type-cell__item clearfix">
											<view class="type-cell__info" v-for="(items,index) in item.info">
												<image :src="items.icon" mode="" class="type-info__icon"></image>
												<text class="type-info__label">{{items.label}}</text>
												<text class="type-info__val">{{items.val}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y="true" style="height: calc(100vh - 140px);width: 100%;" @scrolltolower="onreachBottom">
						<view class="type-cells">
							<view class="type-cell" v-for="(item,index) in list" :key="index">
								<view class="type-cell__hd">
									<view class="type-cell__title">{{item.title}}</view>
									<button type="default" class="remove-btn" :class="{active:isActive}"
										@click="remove(item.id)">移除科室</button>
								</view>
								<view class="type-cell__bd">
									<view class="type-cell__group">
										<view class="type-cell__item clearfix">
											<view class="type-cell__info" v-for="(items,index) in item.info">
												<image :src="items.icon" mode="" class="type-info__icon"></image>
												<text class="type-info__label">{{items.label}}</text>
												<text class="type-info__val">{{items.val}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: [{
					name: '全部'
				}, {
					name: '本科室'
				}, {
					name: '进修',
				}, {
					name: '轮科',
				}, {
					name: '住陪',
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				barStyle: {
					backgroundColor: '#00a9e8',
					bottom: "0"
				},
				itemStyle: {
					fontSize: '34rpx'
				},
				list: [{
					id: 1,
					title: '测试病区',
					info: [{
						icon: '../../static/images/inspect/icon1.png',
						label: '姓名：',
						val: '张翼德'
					}, {
						icon: '../../static/images/inspect/icon5.png',
						label: '手机号：',
						val: '17660656637'
					}, {
						icon: '../../static/images/inspect/icon6.png',
						label: '工号：',
						val: '556'
					}, {
						icon: '../../static/images/inspect/icon7.png',
						label: '类型：',
						val: '本科室'
					}]
				}, {
					id: 2,
					title: '测试病区',
					info: [{
						icon: '../../static/images/inspect/icon1.png',
						label: '姓名：',
						val: '张翼德'
					}, {
						icon: '../../static/images/inspect/icon5.png',
						label: '手机号：',
						val: '17660656637'
					}, {
						icon: '../../static/images/inspect/icon6.png',
						label: '工号：',
						val: '556'
					}, {
						icon: '../../static/images/inspect/icon7.png',
						label: '类型：',
						val: '本科室'
					}]
				}, {
					id: 3,
					title: '测试病区',
					info: [{
						icon: '../../static/images/inspect/icon1.png',
						label: '姓名：',
						val: '张翼德'
					}, {
						icon: '../../static/images/inspect/icon5.png',
						label: '手机号：',
						val: '17660656637'
					}, {
						icon: '../../static/images/inspect/icon6.png',
						label: '工号：',
						val: '556'
					}, {
						icon: '../../static/images/inspect/icon7.png',
						label: '类型：',
						val: '本科室'
					}]
				}, {
					id: 4,
					title: '测试病区',
					info: [{
						icon: '../../static/images/inspect/icon1.png',
						label: '姓名：',
						val: '张翼德'
					}, {
						icon: '../../static/images/inspect/icon5.png',
						label: '手机号：',
						val: '17660656637'
					}, {
						icon: '../../static/images/inspect/icon6.png',
						label: '工号：',
						val: '556'
					}, {
						icon: '../../static/images/inspect/icon7.png',
						label: '类型：',
						val: '本科室'
					}]
				}, {
					title: '测试病区',
					info: [{
						icon: '../../static/images/inspect/icon1.png',
						label: '姓名：',
						val: '张翼德'
					}, {
						icon: '../../static/images/inspect/icon5.png',
						label: '手机号：',
						val: '17660656637'
					}, {
						icon: '../../static/images/inspect/icon6.png',
						label: '工号：',
						val: '556'
					}, {
						icon: '../../static/images/inspect/icon7.png',
						label: '类型：',
						val: '本科室'
					}]
				}],
				isActive: false,
				search: ''
			}
		},
		onLoad() {

		},
		methods: {
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			remove(id) {
				this.list.splice(this.list.find(item => {
					return item.id === id
				}), 1)
				this.isActive = true
			},
			cancle() {
				this.search = "";
			}
		}
	}
</script>

<style lang="scss">
	.nurse-person {
		font-size: 26rpx;
		color: #636363;
		line-height: 32rpx;
		padding: 0 30rpx 24rpx;
		background-color: #fff;

		text {
			color: #00a4e8;
			margin-left: 12rpx;
		}
	}

	.tab-content {
		padding: 20rpx 30rpx;
		height: calc(100vh - 112px);
		box-sizing: border-box;
		
		swiper {
			height: 100%;
		}
	}

	.type-cells {
		.type-cell {
			position: relative;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			margin-bottom: 20rpx;

			.type-cell__hd {
				padding: 16rpx 16rpx 16rpx 26rpx;
				border-bottom: 1rpx dashed #d8dee6;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.type-cell__hd::after {
				position: absolute;
				content: '';
				width: 22rpx;
				height: 22rpx;
				border-radius: 50%;
				background-color: #f5f7fa;
				right: -11rpx;
				bottom: -11rpx;
			}

			.type-cell__hd::before {
				position: absolute;
				content: '';
				width: 22rpx;
				height: 22rpx;
				border-radius: 50%;
				background-color: #f5f7fa;
				left: -11rpx;
				bottom: -11rpx;
			}

			.type-cell__title {
				font-size: 30rpx;
				color: #373b4f;
				line-height: 36rpx;
			}

			.remove-btn {
				font-size: 26rpx;
				color: #f84949;
				padding: 0 16rpx;
				margin: 0;
				height: 48rpx;
				background-color: #fff;
				line-height: 46rpx;
				border: 1rpx solid #f84949;
			}

			.remove-btn.active {
				background-color: #f84949;
				color: #fff;
			}

			.remove-btn::after {
				display: none;
			}

			.type-cell__bd {
				padding: 20rpx 40rpx;
			}


			.type-cell__item {

				.type-cell__info {
					float: left;
					display: flex;
					align-items: center;
					min-width: 280rpx;
					line-height: 56rpx;
					white-space: nowrap;
				}
			}

			.type-info__icon {
				width: 26rpx;
				height: 26rpx;
				margin-right: 18rpx;
			}

			.type-info__label {
				font-size: 26rpx;
				color: #a09fa8;
			}

			.type-info__val {
				font-size: 26rpx;
				color: #373b4f;
			}
		}
	}

	.search-bar {
		padding: 10rpx 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}
</style>
